<template>
	<div class="wrapper">
		<div>
			<u-navbar :is-back="false" :border-bottom="false"></u-navbar>
			<div>
				<div class="title">注册</div>
			</div>
			<div>
				<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入用户名"
					class="mobile" focus v-model="userData.username" />
				<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入密码"
					class="mobile"  v-model="userData.password" type="password" />
				<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入手机号"
					class="mobile"  v-model="userData.mobilePhone" />
				<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入公司名称"
					class="mobile"  v-model="userData.company" />
				<div :class="!enableUserBtnColor ? 'disable' : 'fetch'" @click="register" class="btn">
					注册
				</div>
			</div>
		</div>
	</div>
	</div>
</template>


<script>
	import {
		md5
	} from "@/utils/md5.js";
	import {
		userRegister
	} from "@/api/login";
	export default {
		data() {
			return {
				userData: {
					username: "",
					password: "",
					mobilePhone: "",
					company: "",
					code: "111111",
				},
				enableUserBtnColor: false,
				inputStyle: {
					height: "104rpx",
					"border-bottom": "1rpx solid #D8D8D8",
					"letter-spacing": "1rpx",
					"font-size": "40rpx",
					"line-height": "40rpx",
					color: "#333",
				},
				placeholderStyle: "font-size: 32rpx;line-height: 32rpx;color: #999999;",
			};
		},
		onShow() {

		},

		mounted() {

		},

		onLoad(options) {

		},
		methods: {
			register() {
				console.log(this.registerData);
				if (!this.registerData.username) {
					uni.showToast({
						title: "请填写用户名",
						duration: 2000,
						icon: "none",
					});
					return false;
				}
				
				if (!this.registerData.password) {
					uni.showToast({
						title: "请填写密码",
						duration: 2000,
						icon: "none",
					});
					return false;
				}
				
				if (!this.$u.test.mobile(this.registerData.mobilePhone)) {
					uni.showToast({
						title: "请填写正确手机号",
						duration: 2000,
						icon: "none",
					});
					return false;
				}
				
				if (!this.registerData.username) {
					uni.showToast({
						title: "请填写公司名称",
						duration: 2000,
						icon: "none",
					});
					return false;
				}
				
				//注册
				this.submitUserRegister();

			},
			// 提交用户登录
			async submitUserRegister() {
				let params = JSON.parse(JSON.stringify(this.registerData));
				params.password = md5(params.password);
				try {
					let res = await userRegister(params, this.clientType);
					if (res.data.success) {
						console.log("注册成功!");
						uni.showToast({
							title: "注册成功",
							duration: 2000,
							icon: "none",
						});
					} else {
						uni.showToast({
							title: "注册失败",
							duration: 2000,
							icon: "none",
						});
					}
				} catch (error) {
					
				}
			}
		}

	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapper {
		padding: 0 80rpx;
	}

	.title {
		padding-top: calc(104rpx);
		font-style: normal;
		line-height: 1;
		font-weight: 500;
		font-size: 56rpx;
		color: #333;
	}

	.box-code {
		margin-top: 78rpx;
	}

	.desc,
	.desc-light {
		font-size: 32rpx;
		line-height: 32rpx;
		color: #333333;
		margin-top: 40rpx;
	}

	.desc {
		color: #333;
	}

	.desc-light {
		color: #999999;

		>span {
			color: #333;
			margin-left: 8rpx;
		}
	}

	.mobile {
		margin-top: 80rpx;
	}

	.disable {
		background: linear-gradient(90deg, #5370F2 2.21%, #2C45CB 99.86%);
	}

	.fetch {
		background: linear-gradient(57.72deg, #5370F2 18.14%, #2C45CB 98.44%);
	}

	.btn {
		border-radius: 100px;
		width: 590rpx;
		margin-top: 97rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
	}

	.tips {
		font-size: 12px;
		line-height: 20px;
		margin-top: 32rpx;
		width: 546rpx;

		>span {
			color: $light-color;
		}
	}

	.fetch-btn {
		width: 370rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #f2f2f2;
		border-radius: 100rpx;
		font-size: 28rpx;
		color: #999;

		margin: 71rpx auto 0 auto;
	}

	.login-list {
		display: flex;
		width: 590rpx;
		position: absolute;
		top: 1200rpx;
		align-items: center;
		justify-content: center;
	}

	.login-item {
		width: 80rpx;
		border-radius: 10rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		margin: 0 20rpx;
	}

	.user-password-tips {
		text-align: center;
		color: $main-color;
		margin: 20px 0;
	}

	.login-dl {
		margin-top: 20rpx;
		padding: 15rpx;
		display: flex;
		justify-content: space-between;

		/* 使子元素在主轴（这里是水平方向）上两端对齐 */
		.login-zc {}

		.login-wjmm {}
	}
</style>